<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
    <link rel="stylesheet" href="<%- rootUrl %>/res/adapter.css" />
    <link rel="stylesheet" href="<%- rootUrl %>/node_modules/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/common.css" />
    <style>
        html, body {height:100%}
        .login_div
        {
            display:inline-block;
            background: url(img/woodtexture.jpg);
            font-size: 16px;
            border:2px solid #fed;
        }
        .login_div > div { margin-bottom: 20px }
        .login_div > div:first-child { margin-top: 20px }
        .entry_div { display:inline-block; color:#fed; background:#b60; border:2px solid #fed;}
        .childchild-vert-middle > * > * {vertical-align: middle}
    </style>
    <title>用户登录 - 我爱零吃网</title>
    <script src="<%- rootUrl %>/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="<%- rootUrl %>/res/adapter.js"></script>
</head>
<body class="body-nomargin" style="background:black">
<alljs-widget><message-top><%- message %></message-top></alljs-widget>
<div id="size-adapt" class="hbox align-items-center justify-content-center" style="position:absolute;background:url(img/login03.jpg);background-size:100% 100%">
    <div style="text-align: center">
        <div class="button login_div">
            <div class="childs-vert-middle" style="font-weight: bold;font-style: italic">
                <div class="ico48" style="background-image: url(img/deliface48.png)"></div>
                <span style="font-size: 22px">&nbsp;我要&nbsp;</span>
                <span style="font-size: 26px">"好吃的"</span>
            </div>
            <div>
                <span>手机号</span>
                <input type="text" value="+86" style="width:30px;height:24px"/>
                <input type="text" placeholder="您的手机号" style="width:150px;height:24px"/>
            </div>
            <div>
                <span>验证码</span>
                <input type="text" style="width:104px;height:24px"/>
                <a href="javascript:;"><span style="text-decoration: underline">获取验证码</span></a>
            </div>
            <div class="childchild-vert-middle">
                <a href="index.html"><div class="ico32" style="background-image: url(icon/weixin32.png)"></div></a>
                <a href="index.html"><div class="ico32" style="background-image: url(icon/qq32.png)"></div></a>
                <a href="index.html"><div class="entry_div button" style="margin:4px">登录</div></a>
                <a href="index.html"><div class="ico32" style="background-image: url(icon/weibo32.png)"></div></a>
                <a href="index.html"><div class="ico32" style="background-image: url(icon/zhifubao32.png)"></div></a>
            </div>
        </div>
    </div>
</div>
<script>
    window.onresize=function(){
        let div = document.getElementById('size-adapt');
        let rate = window.innerHeight / window.innerWidth;
        let toRate = 8/5;
        if (rate > toRate){
            let margin = 0.5*(window.innerHeight - window.innerWidth * toRate)/window.innerHeight;
            div.style.left=div.style.right='0';
            div.style.top=div.style.bottom=(margin*100).toFixed(2)+'%';
        } else {
            let margin = 0.5*(window.innerWidth - window.innerHeight / toRate)/window.innerWidth;
            div.style.top=div.style.bottom='0';
            div.style.left=div.style.right=(margin*100).toFixed(2)+'%';
        }
    };
    window.onresize();
</script>
</body>
</html>